<template>
  <div class="application-info-wrap">
    <div :class="{'is-show-alert': isNotSame}" class="title-container">
      <div><SectionTitle title="纳税人信息" /></div>
      <div v-if="isNotSame" class="alert">
        <el-alert
          show-icon
          title="小提示：请注意纳税人名称和付款人名称不一致 "
          type="warning"/>
      </div>
    </div>
    <el-form
      ref="taxpayerInfoForm"
      :model="taxpayerInfo"
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      class="taxpayer-form lineHeight32"
      label-width="120px">
      <el-row :class="{'dividing': !showMobilePage}" :gutter="20" class="response-el-row" type="flex">
        <el-col :span="12">
          <el-form-item label="纳税人名称:">
            <ToolTip :class="{'taxpayer-red-color': isNotSame}" :content="taxpayerInfo.taxpayer" placement="top" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纳税人识别号:">
            <SecretText v-if="isComplate" :log-text="getLogText('纳税人识别号')" :origin-text="taxpayerInfo.taxpayerNum" />
            <ToolTip v-else :content="taxpayerInfo.taxpayerNum" placement="top" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行:">
            <ToolTip :content="taxpayerInfo.accountsBank" placement="top" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票地址:">
            <SecretText v-if="isComplate" :log-text="getLogText('开票地址')" :origin-text="taxpayerInfo.issueAddress" />
            <ToolTip v-else :content="taxpayerInfo.issueAddress" placement="top" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户账号:">
            <SecretText v-if="isComplate" :log-text="getLogText('开户账号')" :origin-text="taxpayerInfo.accountNum" />
            <ToolTip v-else :content="taxpayerInfo.accountNum" placement="top" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册电话:">
            <SecretText v-if="isComplate" :log-text="getLogText('注册电话')" :origin-text="taxpayerInfo.phone" />
            <ToolTip v-else :content="taxpayerInfo.phone" placement="top" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="一般纳税人证明:">
            <div class="ellipsis">
              <FileShowList
                v-if="taxpayerInfo.certificateFile && taxpayerInfo.certificateFile.length"
                :file-list="taxpayerInfo.certificateFile"
                style="max-width:100%;" />
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import FileShowList from '@/components/CreateOrder/fileShowList';
import SectionTitle from '@/components/Title';

export default {
  components: {
    SectionTitle,
    FileShowList
  },
  props: {
    taxpayerInfo: {
      type: Object,
      default: () => ({})
    },
    showMobilePage: {
      type: Boolean,
      default: false
    },
    isComplate: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isNotSame() {
      const taxpayer = this.taxpayerInfo.taxpayer;
      if (!this.taxpayerInfo.isArrival) return false;
      let isSame = false;
      if (this.taxpayerInfo.financeTxnList) {
        isSame = this.taxpayerInfo.financeTxnList.every(i => {
          return i.payName === taxpayer;
        });
      }
      return !isSame;
    }
  },
  methods: {
    getLogText(label) {
      return `开票申请${this.taxpayerInfo.approvalNo}的${label}`;
    }
  }
};
</script>
<style lang="scss" scoped>
.taxpayer-red-color {
  color: #FF4E5F;
}
.application-info-wrap{
  .taxpayer-form {
    & ::v-deep {
      .el-form-item {
        .el-form-item__label {
          font-size: 14px;
          font-weight: 400;
          color: #999999 !important;
          opacity: 1;
          line-height: 30px;
        }
      }
      .el-form-item__content {
        font-size: 14px;
        line-height: 30px;
        font-weight: 400;
        color: #333333;
        opacity: 1;
      }
    }
  }
  .dividing {
    &::v-deep {
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(2n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
}
.title-container {
  display: flex;
  margin: 16px 0 8px;
  align-items: center;
  .alert {
    margin-left: 10px;
    &::v-deep {
      .el-alert__closebtn {
        right: 10px;
      }
    }
  }
  .is-show-alert {
    height: 35px;
  }
}
</style>
